<h4>View questions by topic</h4>
<!-- <hr> and sign in check is here to create a space that makes the form
line up nicely if the user is asked to login on the questions/index page -->
<% if !current_user %>
  <hr style="visibility:hidden;" />
  <hr style="visibility:hidden;" />
<% end %>

<form id="tagform" method="GET" action="/questions/tag/">
  <div class="input-group">
    <input aria-label="Type your topic" type="search" tabindex="1" autocomplete="off" id="taginput" name="id" type="text" placeholder="type your topic" data-provide="typeahead" class="form-control" required="required" />
    <div class="input-group-append" >
      <button type="submit" rel="tooltip" title="View questions with the entered title" class="btn btn-primary">Search</button>
    </div>
  </div>
</form>
  <script>
    jQuery(document).ready(function() {

      $('#taginput').typeahead({
        items: 8,
        minLength: 3,
        item: '<li class="dropdown-item"><a class="dropdown-item" href="#" role="option"></a></li>',
        source: function (query, process) {
          var replaced_query = query.replace(' ', '-');
          return $.post('/tag/suggested/' + replaced_query, {}, function (data) {
            return process(data)
          })
        },
        updater: function(text) {
          $('#taginput').val(text)
          window.location = "/questions/tag/" + text;
        }
      });

      $('#tagform').submit(function(e) {
        e.preventDefault();
        window.location = "/questions/tag/" + ($('#taginput').val()).replace(/\s/g, '-');
      });

    });
  </script>
